<template>
  <div>
     <tw-chart
        :dataset="schoolDataLine.dataset"
        :chartOption="schoolDataLine.chartOption"
        :chartDataMaps="schoolDataLine.chartDataMaps"
        height="230px"
      ></tw-chart>
  </div>
</template>
<script>
export default {
  name: 'tw-linebar',
  props: {
    source: {
      type: [String],
      default: '0'
    },
    linetype: {
      type: String,
      default: 'line'
    }
  },
  data () {
    return {
      curYear: 2019,
      schoolDataLine: {
        dataset: [],
        chartOption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          grid: {
            top: '15%',
            left: '5%',
            right: '8%',
            bottom: '4%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              boundaryGap: true,
              axisLabel: {
                fontSize: 16
              }
            }],
          yAxis: [
            {
              type: 'value',
              name: '人数(万人)',
              nameTextStyle: {
                color: '#94aad4',
                fontSize: 16
              },
              axisLabel: {
                fontSize: 16
              }
            }
          ],
          series: []
        },
        chartDataMaps: []
      },
      renshu: [],
      renshu2017: [],
      renshu2018: [],
      renshu2019: [],
      renshu2020: [],
      renshu1: [],
      renshu2: [],
      shuidian: [],
      shuidian2017: [],
      shuidian2018: [],
      shuidian2019: [],
      shuidian2020: [],
      shuidian1: [],
      shuidian2: [],
      line: {},
      linebar: {}
    }
  },
  mounted () {
    this.initData()
  },
  watch: {
    '$store.state.curYear' (val) {
      let vm = this
      // if (vm.curYear >= val) {
      //   // vm.shuidian = vm.shuidian2
      //   // vm.shuidian1 = vm.shuidian2
      //   vm.renshu = vm.renshu2
      //   vm.renshu1 = vm.renshu2
      // } else {
      //   // vm.shuidian1 = []
      //   vm.renshu1 = []
      //   // vm.shuidian.forEach((item, index) => {
      //   //   vm.shuidian1.push({
      //   //     year: item.year,
      //   //     shui: parseInt(item.shui * 1.1),
      //   //     dian: parseInt(item.dian * 1.1)
      //   //   })
      //   // })
      //   // vm.shuidian = vm.shuidian1
      //   vm.renshu.forEach((item, index) => {
      //     // vm.xdata.push(item.year)
      //     vm.renshu1.push({
      //       year: item.year,
      //       chusheng: parseInt(item.chusheng * 1.1),
      //       dengji: parseInt(item.dengji * 1.1),
      //       xuexiao: parseInt(item.xuexiao * 1.1),
      //       zxzs: parseInt(item.zxzs * 1.1),
      //       zxzx: parseInt(item.zxzx * 1.1),
      //       xxzs: parseInt(item.xxzs * 1.1),
      //       xszx: parseInt(item.xszx * 1.1)
      //     })
      //   })
      //   vm.renshu = vm.renshu1
      //   // console.log(vm.shuidian)
      // }

      if (val === 2017) {
        vm.shuidian = vm.shuidian2017
        vm.renshu = vm.renshu2017
      } else if (val === 2018) {
        vm.shuidian = vm.shuidian2018
        vm.renshu = vm.renshu2018
      } else if (val === 2019) {
        vm.shuidian = vm.shuidian2019
        vm.renshu = vm.renshu2019
      } else {
        vm.shuidian = vm.shuidian2020
        vm.renshu = vm.renshu2020
      }
      vm.setOption()
      vm.curYear = val
    }
  },
  methods: {
    initData () {
      let vm = this
      vm.$axios.get(`${process.env.BASE_URL}json/forecasegongshu.json`, {
        baseURL: ''
      }).then((resp) => {
        vm.renshu = resp.data.renshu[0]
        vm.renshu2017 = resp.data.renshu[0]
        vm.renshu2018 = resp.data.renshu[1]
        vm.renshu2019 = resp.data.renshu[2]
        vm.renshu2020 = resp.data.renshu[3]
        vm.renshu1 = resp.data.renshu[2]
        // vm.renshu2 = resp.data.renshu
        vm.shuidian = resp.data.shuidian[0]
        vm.shuidian2017 = resp.data.shuidian[0]
        vm.shuidian2018 = resp.data.shuidian[1]
        vm.shuidian2019 = resp.data.shuidian[2]
        vm.shuidian2020 = resp.data.shuidian[3]
        // vm.shuidian1 = resp.data.shuidian
        // vm.shuidian2 = resp.data.shuidian
        vm.line = resp.data.line
        vm.linebar = resp.data.linebar
      }).catch((err) => {
        console.log(err)
      })
    },
    setOption () {
      let vm = this
      let index = parseInt(vm.source)
      if (vm.linetype === 'line' || vm.linetype === 'scatter') {
        let data0 = []
        let data1 = []
        let data2 = []
        let data3 = []
        let data4 = []
        vm.shuidian.forEach(ele => {
          data3.push({ name: ele.year, grade1: ele.shui })
          data4.push({ name: ele.year, grade1: ele.dian })
        })
        vm.renshu1.forEach(ele => {
          data0.push({ name: ele.year, grade1: ele.xuexiao })
          data1.push({ name: ele.year, grade1: ele.chusheng })
          data2.push({ name: ele.year, grade1: ele.dengji })
        })
        let dataset = [data0, data1, data2, data3, data4]
        vm.schoolDataLine.chartOption.yAxis[0].name = vm.line.yAxis[index]
        vm.schoolDataLine.dataset = vm.line.dataset[index]
        vm.schoolDataLine.dataset = dataset[index]
        vm.schoolDataLine.chartDataMaps = vm.line.chartDataMaps.map(item => {
          return {
            ...item,
            type: vm.linetype
          }
        })
      } else if (vm.linetype === 'linebar') {
        let data0 = []
        let data1 = []
        vm.renshu.forEach(ele => {
          if (parseInt(vm.curYear) > parseInt(ele.year)) {
            data1.push({ name: ele.year, grade1: ele.zxzs, grade2: ele.zxzx, grade5: ele.zxzs, grade6: ele.zxzx })
            data0.push({ name: ele.year, grade1: ele.xxzs, grade2: ele.xszx, grade5: ele.xxzs, grade6: ele.xszx })
          } else if (parseInt(vm.curYear) === parseInt(ele.year)) {
            data1.push({ name: ele.year, grade1: ele.zxzs, grade2: ele.zxzx, grade3: ele.zxzs, grade4: ele.zxzx, grade5: ele.zxzs, grade6: ele.zxzx })
            data0.push({ name: ele.year, grade1: ele.xxzs, grade2: ele.xszx, grade3: ele.xxzs, grade4: ele.xszx, grade5: ele.xxzs, grade6: ele.xszx })
          } else {
            data1.push({ name: ele.year, grade3: ele.zxzs, grade4: ele.zxzx, grade5: ele.zxzs, grade6: ele.zxzx })
            data0.push({ name: ele.year, grade3: ele.xxzs, grade4: ele.xszx, grade5: ele.xxzs, grade6: ele.xszx })
          }
        })
        // console.log('da', data0)
        let dataset = [data0, data1]
        // vm.schoolDataLine.dataset = resp.data.linebar.dataset[index]
        vm.schoolDataLine.dataset = dataset[index]
        vm.schoolDataLine.chartOption.yAxis = [
          {
            type: 'value',
            // splitNumber: 3,
            name: '学生总数(人)',
            nameTextStyle: {
              color: '#94aad4',
              fontSize: 16
            },
            axisLabel: {
              fontSize: 16
            }
          },
          {
            type: 'value',
            // splitNumber: 3,
            name: '新生总数(人)',
            nameTextStyle: {
              color: '#94aad4',
              fontSize: 16
            },
            axisLabel: {
              fontSize: 16
            }
          }
        ]
        vm.schoolDataLine.chartOption.legend = {
          top: '2%',
          textStyle: {
            fontSize: 16
          },
          borderRadius: 5
        }
        vm.schoolDataLine.chartOption.tooltip = {
          show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function (params) {
            let text = ''
            let text1 = ''
            if (params.length > 0) {
              params.forEach(item => {
                if (item.value && item.seriesName === '实际学生人数') {
                  text = item.marker + '实际学生人数：' + item.value
                } else if (item.value && item.seriesName === '系统预测学生人数') {
                  text1 = item.marker + '系统预测学生人数：' + item.value
                }
              })
            }
            // let text = params.marker + '实际学生人数：' + 456 + '<br>' + params.marker + '系统预测学生人数：' + 234
            // console.log(params)
            return text + '<br>' + text1
          }
        }
        vm.schoolDataLine.chartDataMaps = vm.linebar.chartDataMaps.map(item => {
          return {
            ...item,
            type: item.dataKey === 'grade5' || item.dataKey === 'grade6' ? 'bar' : 'line',
            yAxisIndex: item.dataKey === 'grade5' || item.dataKey === 'grade6' ? 1 : 0,
            barMaxWidth: 15,
            smooth: true,
            lineStyle: {
              type: item.dataKey === 'grade3' || item.dataKey === 'grade4'
                ? 'dot'
                : 'solid'
            },
            itemStyle: {
              barBorderRadius: [5, 5, 0, 0]
            }
          }
        })
      }
    }
  }
}
</script>
